import * as React from 'react';
import { observer } from 'mobx-react'
import styles from './index.scss';
import Num from './Num'
import Line from '../../home/Line'
import { observable } from "mobx";


interface IProps {
    title: string// 标题
    count: number// 相关的数量
    chartDataY: number[]// 图表的数据Y
    chartDataX: string[]// 图表的数据X
    color: string
    unit: string
    identify: Boolean
}

interface IStates {
}

@observer
class Home extends React.Component<IProps, IStates> {

    constructor(props) {
        super(props);
    }

    @observable
    public dealCount: number


    public render() {
        const { count, chartDataY, chartDataX, title, color, unit, identify } = this.props
        return (
            <div className={styles.oneMid}>
                <p className={styles.title}>{title}</p>

                {
                    identify ? <div className={styles.container}>
                        {
                            count ?
                                <div className={styles.num}>
                                    {
                                        count.toString().substr(0).split('').map((item, index) => {
                                            return (
                                                <Num key={`item_${index}`} count={item} />
                                            )
                                        })
                                    }
                                </div>
                                :
                                <div className={styles.text}>设备运行正常</div>
                        }
                        <div className={styles.EC}>
                            <Line unit={unit} color={color} dataY={chartDataY} dataX={chartDataX} />
                        </div>
                    </div> :
                        <div className={styles.anthoer}>
                            <div className={styles.fixText}>备件响应正常</div>
                        </div>
                }

            </div>
        );
    }
}

export default Home;
